<!DOCTYPE html>
<html>

<head>
    <title>point</title>
    <script type="text/javascript" src="https://unpkg.com/dat.gui@0.7.6/build/dat.gui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
    <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script>
    <script type="text/javascript"
        src="https://unpkg.com/three@0.138.0/examples/js/libs/stats.min.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
            width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>

        var map = new maptalks.Map("map", {
            center: [13.416935229170008, 52.529564137540376],
            zoom: 15,
            pitch: 70,
            bearing: 0,
            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });

        // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true
            // animation: true
        });
        threeLayer.prepareToDraw = function (gl, scene, camera) {
            stats = new Stats();
            stats.domElement.style.zIndex = 100;
            document.getElementById('map').appendChild(stats.domElement);

            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);

            addPoints(scene);

        };
        threeLayer.addTo(map);

        var color = '#fff';


        function crateTexture(fillStyle) {
            const size = 16;
            const canvasDom = document.createElement('canvas');
            canvasDom.width = size;
            canvasDom.height = size;
            const ctx = canvasDom.getContext('2d');
            ctx.fillStyle = fillStyle || color;
            ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
            ctx.fill();
            const texture = new THREE.Texture(canvasDom);
            texture.needsUpdate = true; //使用贴图时进行更新
            return texture;
        }


        function createMateria(fillStyle) {
            return new THREE.PointsMaterial({
                // size: 10,
                sizeAttenuation: false,
                // color: 'red',
                // alphaTest: 0.5,
                // vertexColors: THREE.VertexColors,
                //  transparent: true
                // color: 0xffffff,
                size: 20,
                transparent: true, //使材质透明
                blending: THREE.AdditiveBlending,
                depthTest: true, //深度测试关闭，不消去场景的不可见面
                depthWrite: false,
                map: crateTexture(fillStyle)
            });
        }


        var points = [];
        // 点的材质
        const material = createMateria();
        var highlightmaterial = createMateria('yellow');

        function addPoints() {
            const lnglats = [
                [13.429362937522342, 52.518205849377495]
                , [13.41688993786238, 52.52216099633924]
                , [13.417991247928398, 52.53296954185342]
                , [13.438154245439819, 52.533321196953096]
                , [13.450418871799684, 52.52653968753597]
                , [13.390340036780685, 52.51953598324846]
                , [13.399921081391199, 52.50920191922407]
                , [13.366122901455583, 52.50949703597493]
                , [13.365784792637783, 52.51964629275582]
                , [13.371429857108524, 52.528732386936014]
                , [13.383686384074508, 52.53781463596616]
                , [13.40395563186371, 52.540223413847315]
                , [13.361485408920998, 52.53916869831616]
                , [13.35373758485457, 52.52883597474849]
                , [13.355233792792774, 52.519259850666316]
                , [13.369548077301943, 52.506940362998336]
                , [13.338732610093984, 52.50860998116909]
                , [13.341879792058194, 52.52318729489704]
                , [13.348448231846305, 52.537668773653735]
            ];
            points = lnglats.map(lnglat => {
                const point = threeLayer.toPoint(lnglat, { height: 100 * Math.random() }, material);
                // tooltip test
                point.setToolTip(point.getId(), {
                    showTimeout: 0,
                    eventsPropagation: true,
                    dx: 10
                });

                //infowindow test
                point.setInfoWindow({
                    content: 'id:' + point.getId(),
                    title: 'message',
                    animationDuration: 0,
                    autoOpenOn: false
                });
                //event test
                ['click', 'mouseout', 'mouseover'].forEach(function (eventType) {
                    point.on(eventType, function (e) {
                        console.log(e.type, e);
                        // console.log(this);
                        if (e.type === 'mouseout') {
                            this.setSymbol(material);
                        }
                        if (e.type === 'mouseover') {
                            this.setSymbol(highlightmaterial);
                        }
                    });
                });
                return point;

            });
            threeLayer.addMesh(points);

            initGui();
            animation();
        }



        function animation() {
            // layer animation support Skipping frames
            threeLayer._needsUpdate = !threeLayer._needsUpdate;
            if (threeLayer._needsUpdate) {
                threeLayer.redraw();
            }
            stats.update();
            requestAnimationFrame(animation);
        }

        function initGui() {
            var params = {
                add: true,
                color: '#fff',
                show: true,
                opacity: 1,
                altitude: 0,
                // animateShow: animateShow
            };

            var gui = new dat.GUI();
            gui.add(params, 'add').onChange(function () {
                if (params.add) {
                    threeLayer.addMesh(points);
                } else {
                    threeLayer.removeMesh(points);
                }
            });
            gui.addColor(params, 'color').name('color').onChange(function () {
                material.map = crateTexture(params.color);
                points.forEach(function (mesh) {
                    mesh.setSymbol(material);
                });
            });
            gui.add(params, 'opacity', 0, 1).onChange(function () {
                material.opacity = params.opacity;
                points.forEach(function (mesh) {
                    mesh.setSymbol(material);
                });
            });
            gui.add(params, 'show').onChange(function () {
                points.forEach(function (mesh) {
                    if (params.show) {
                        mesh.show();
                    } else {
                        mesh.hide();
                    }
                });
            });
            gui.add(params, 'altitude', 0, 300).onChange(function () {
                points.forEach(function (mesh) {
                    mesh.setAltitude(params.altitude);
                });
            })
        }
    </script>
</body>

</html>